
.home{
  display: flex;
  flex-direction: column;
  .main{
      flex: 1;
      overflow-y: scroll;
      .swiper{
          height: 250px;
          background-color: #ccc;
      }

      .mainbox{
          width: 90%;
          height: 120px;
          margin: 10px auto;
          display: flex;
          .rank{
              position: relative;
              flex: 2;
              background: url("../../assets/imgs/index-card-rank.png") no-repeat rgba(21, 146, 204, 100);
              background-position: -45px 1px;
              background-size: contain;
              margin-right: 10px;
              border-radius: 10px;
              padding: 15px;
              opacity: 0.73;
              .rank_p{
                color: #004E73;
                font-size: 16px;
                font-weight: bolder;
                text-align: left;
              }
              .rank_num{
                position: absolute;
                color: #FFFFFF ;
                font-size: 60px;
                bottom: 10px;
                right: 15px;
              }
          }
          

          .clock{
              flex: 3;
              background-color: #ccc;
              border-radius: 10px;
              background:url("../../assets/imgs/index-card-sum.png") no-repeat rgb(123, 203, 245) 100%;
              background-position: 10px -5px;
              background-size: contain;
              padding: 15px;
              opacity: 0.73;
              position: relative;
              p{
                color: #004E73;
                font-size: 20px;
                -font-weight: bolder;
              }

              button{
                position: absolute;
                bottom: 10px;
                right: 15px;
                background-color: rgba(170, 217, 247, 100);
                border: 3px solid rgba(0, 81, 119, 100);
                opacity: 0.7;
                border-radius: 20px;
              }
          }

          .sportbox{
              flex: 1;
              background-color: #ccc;
              border-radius: 10px;
              margin-right: 10px;
              padding: 15px;
              -font-weight: bold;
              color: rgba(255, 255, 255, 100);
              font-size: 16px;
              background: url("../../assets/imgs/index-card-data.png") no-repeat center;
              background-size: cover;
          }

          .badgesbox{
              flex: 1;
              background-color: #ccc;
              border-radius: 10px;
              opacity: 0.58;
              padding: 15px;
              opacity: 0.73;
              position: relative;
              background:url("../../assets/imgs/index-card-badge.png") no-repeat #C6D7F3;
              background-position: 10px 0px;
              background-size: contain;
              position: relative;
              .badges_p{
                font-size: 16px;
                color: #004E73 ;
              }
              .badges_num{
                color: #004E73;
                font-size: 60px;
                position: absolute;
                bottom: 10px;
                right: 15px;
              }
          }

          
      }

      .coursebox{
          padding: 15px;
          background-color: #ccc;
          border-radius: 10px;
          color: rgba(255, 255, 255, 100);
          font-size: 16px;
          background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat center;
          background-size: cover;
          
      }
      .runbox{
        padding: 15px;
          background-color: #ccc;
          border-radius: 10px;
          color: rgba(255, 255, 255, 100);
          font-size: 16px;
          background: url(../../assets/imgs/index-card-run.png);
          background-size: cover;
      }
  }
  .adv_banner1{
    background: url(../../assets/imgs/adv_banner1.jpg) top center no-repeat;
    background-size: cover;
  }
  .adv_banner2{
    background: url(../../assets/imgs/adv_banner2.jpg) top center no-repeat;
    background-size: cover;
  }
  .adv_banner3{
    background: url(../../assets/imgs/adv_banner3.jpg) top center no-repeat;
    background-size: cover;
  }
}